$(function (){
    //显示所有数据
    let showAll = function (){
        $.ajax({
            url:"/api/teacher/findAllTeachers"
        }).done(function(data){
            show(data)
        })
    }

    $.showAll = showAll  // 将 showAll 函数挂载到全局的 jQuery 对象上，方便在外部调用，遵循 jQuery 插件的一种简单挂载思路
    $.showAll()

    //显示指定数据，将请求得到的数据渲染到表单上
    let show = function(data){
        let html = ""
        // $("#teacherTb").html(html)
        data.forEach((teacher)=>{
                html += "<tr>"
                html += `<td>${teacher.tid}</td>`
                html += `<td>${teacher.name}</td>`
                html += `<td>${teacher.college}</td>`
                html += `<td><button type="button" class="layui-btn layui-btn-primary layui-btn-radius layui-border-green delButton">删除</button>
                         <button type="button" class="layui-btn layui-btn-primary layui-btn-radius layui-border-green Button" lay-on="test-page-custom">修改</button>
                    </td>`
                html += "</tr>"
            })

        $("#teacherTb").html(html)
    }


    //  删除操作
    $("#teacherTb").on("click", ".delButton", function () {
        let clickedButton = $(this);
        let row = clickedButton.closest('tr');
        let id = row.find('td').eq(0).text();
        layer.confirm('你是否要删除？', {
            btn: ['确定', '关闭'] //按钮
        }, function(){

            $.ajax({
                url: "/api/teacher",
                type: "DELETE",
                data: { id: id }
            }).done(function (data) {
                showAll()
            });

            layer.closeAll()
        });

    });

    //更新和新增操作
    $("#teacherTb,.addBtn").on("click", ".Button", function () {
        //获取按钮对应行的工号
        let clickedButton = $(this);
        let row = clickedButton.closest('tr');
        let id = row.find('td').eq(0).text();
        //弹出层设计
        layui.use(function(){
            let $ = layui.$;
            let layer = layui.layer;
            let util = layui.util;
            let form = layui.form;
            // 弹出层事件
            util.on('lay-on', {
                'test-page-custom': function(){
                    //获取当前点击按钮文本
                    var buttonText = $(this).text();
                    layer.open({
                        type: 1,
                        area: '350px',
                        resize: false,
                        shadeClose: true,
                        title: '老师信息录入',
                        content: `
          <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
            <div class="demo-login-container">
              <div class="layui-form-item">
                <div class="layui-input-group">
                  <div style="width: 70px" class="layui-input-split layui-input-prefix">姓名 </div>
                  <input type="text" name="name" value="" lay-verify="required" placeholder="姓名" lay-reqtext="请填写姓名" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-group">
                  <div style="width: 70px" class="layui-input-split layui-input-prefix">工号 </div>
                  <input type="text" name="tid" value="" lay-verify="required" placeholder="工号" lay-reqtext="请填写工号" autocomplete="off" class="layui-input idInput">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-group">
                  <div style="width: 70px" class="layui-input-split layui-input-prefix">学院 </div>
                  <input type="text" name="college" value="" lay-verify="required" placeholder="所在学院" lay-reqtext="请填写所在学院" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-form-item">
                <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">录入</button>
              </div>
                </div>
          </div>
        `,
                        success: function(){
                            //当前点击按钮为修改按钮时
                            if (buttonText === "修改") {
                                let idInput=$(".idInput")
                                idInput.val(id)
                                idInput.prop("disabled",true)
                            }
                            //当前点击按钮为新增按钮时
                            else {
                                let idInput=$(".idInput")
                                idInput.val('')
                                idInput.prop("disabled",false)
                            }
                            // 对弹层中的表单进行初始化渲染
                            form.render();


                            // 表单提交事件
                            form.on('submit(demo-login)', function(data){
                                //表单数据封装
                                var formData = {
                                    name: $('input[name="name"]').val(),
                                    tid: $('input[name="tid"]').val(),
                                    college: $('input[name="college"]').val()
                                };
                                // 使用jQuery的$.ajax发送POST请求
                                $.ajax({
                                    url: "/api/teacher/save",
                                    type: "POST",
                                    data: formData,
                                    success: function (response) {
                                        // 使用全局挂载在 jQuery 对象上的 showAll 函数
                                        $.showAll()
                                        console.log("请求成功，响应数据：", response);
                                    }
                                });
                                //关闭弹窗
                                layer.closeAll()
                                //阻止表单默认提交事件
                                return false
                            });
                        }
                    });
                }
                // })
            })
        })
    });
    //搜素操作
    $(".myinput").keydown(function(e){
        if (e.keyCode == 13){
            let id = $(".myinput").val();
            //输入为空时，显示所有数据
            if (id == ''){
                showAll()
            }
            //输入不为空时，发起请求并取回数据
            else{
                $.ajax({
                    type:"GET",
                    url:"/api/teacher/findById",
                    data: {
                        tid:id
                    },
                    success: function(data){
                        console.log(data)
                        show(data);
                    }
                })
            }

        }
    })
    //点击搜索按钮时
    $(".search").click(function(){
        $.ajax({
            type:"GET",
            url:"http://localhost:8080/api/student/byName",

            data: {
                studentName:name
            },
            success: function(data){
                show(data);
            }
        })
    })
})
